<template>
  <div class="setting-wrapper">
    <div class="settingLeftTitle">
      <p>系统设置</p>
    </div>
    <el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="handleClick">

      <el-tab-pane label="装卸车费设置" name="first">
        <div class="handling-car">
          <section>
          </section>
         <section>
           <el-button style="padding: 0 15px" v-if="hasPermission('truck:truckAxle:edit')" type="default" @click="editAxles()"
                     :disabled="dataListSelections.length <= 0" plain>批量设置
           </el-button>
         </section>
         <el-table size="mini" v-loading="loading" :data="axleTableData" style="width: 100%; margin-top: 10px" border stripe
           :header-cell-style="{
             'background-color': '#eeeeee !important',
           }" :row-class-name="tableRowClassName" @selection-change="selectionChangeHandle">
           <el-table-column type="selection" header-align="center"
             align="center" width="55">
           </el-table-column>
           <el-table-column type="index" label="序号" width="70" align="center">
             <template slot-scope="scope">
               <span>{{ scope.$index + 1 }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="axle.axle" label="车轴类型">
           </el-table-column>
           <el-table-column prop="truckType" label="车辆类型" align="right">
             <template slot-scope="scope">
               <span>{{$dictUtils.getDictLabel("truckType", scope.row.truckType, "")}}</span>
             </template>
           </el-table-column>
           <el-table-column prop="loadFee" label="装车费" align="right">
             <template slot-scope="scope">
               <span v-if="scope.row.loadFee">￥{{ scope.row.loadFee }}</span>
               <span v-else>￥0</span>
             </template>
           </el-table-column>
           <el-table-column prop="unloadFee" label="卸车费" align="right">
           <template slot-scope="scope">
             <span v-if="scope.row.unloadFee">￥{{ scope.row.unloadFee }}</span>
             <span v-else>￥0</span>
           </template>
           </el-table-column>
           <el-table-column prop="state" label="状态" width="110px">
             <template slot-scope="scope">
               <section class="state normal" v-if="scope.row.state===1">
                 <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
               </section>
               <section class="state empty" v-else>
                 <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
               </section>
             </template>
           </el-table-column>
           <el-table-column prop="address" label="操作" width="101">
             <template slot-scope="scope">
                 <template v-for="item in $dictUtils.getDictList('state')">
                   <el-link type="primary" v-if="item.value !=='-1'&&hasPermission('truck:truckType:edit')&& item.value!==(scope.row.state+'')"
                     :underline="false" @click="editState(item.value,scope.row)" :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state">{{item.label}}
                   </el-link>
                 </template>
               <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckType:edit')" @click="editAxle(scope.row.id)">修改
               </el-link>
             </template>
           </el-table-column>
         </el-table>
         <AxleEditFrom ref="axleEditFrom" @refreshDataList="refreshList()"></AxleEditFrom>
       </div>
      </el-tab-pane>
      <el-tab-pane label="信用分规则" name="second">
        <div class="credit-wrapper">
          <div class="credit-note">
            <div class="credit-note-left">
              <p>信用分说明：</p>
            </div>
            <div class="credit-note-right">
              <ul>
                <li><p>1.  信用分总分为100分，信用分低于下限后可能会影响接单</p></li>
                <li><p>2.  信用分扣除分为自动扣分与手动扣分两种方式</p></li>
                <li><p>3.  信用分可进行人工恢复</p></li>
              </ul>
            </div>
          </div>
          <div class="credit-content">
            <el-form label-width="142px">
              <el-form-item label="信用分下限：">
                <el-input :disabled="true" v-model="truckCreditDeduct"></el-input>分<el-button style="margin-left: 30px" type="primary" @click="editCreditScoce">设置信用分下限</el-button>
              </el-form-item>
              <el-form-item label="自动扣分设置：">
                <el-table
                  border
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column prop="rule" label="自动扣分项" width="292">
                    <template slot-scope="scope">
                      {{$dictUtils.getDictLabel("creditDeductRule", scope.row.rule, "")}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="score" label="扣除" width="254"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="editCreditRule(scope.row)"
                                 v-if="hasPermission('truck:creditDeductRule:edit')">设置</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </div>
          <CreditScoreForm
            ref="creditScoreForm"
            @refreshDataList="refreshCreditRule"
          ></CreditScoreForm>
        </div>
      </el-tab-pane>
      <el-tab-pane label="磁卡收费标准" name="third">
        <div class="card-wrapper">
          <div class="card-note">
            <p>卡收费标准计算公式：</p>
          </div>
          <div class="card-form">
            <el-form label-width="450px" :model="cardFeeSetting">
              <el-table
                border
                :data="cardFeeData"
                style="width: 100%">
                <el-table-column prop="number">
                  <template slot-scope="scope">
                    <span v-if="scope.row.conditions === 0">第{{scope.row.number | toChinese}}张卡</span>
                    <span v-if="scope.row.conditions === 1">第{{scope.row.number | toChinese}}张卡之后</span>
                  </template>
                </el-table-column>
                <el-table-column prop="moneys">
                  <template slot-scope="scope">
                    <span v-if="scope.row.conditions === 0"><el-input v-model="scope.row.moneys" :disabled="true"></el-input>元</span>
                    <span v-if="scope.row.conditions === 1"><el-input v-model="scope.row.moneys" :disabled="true"></el-input>元/张</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-form-item>
                <el-button type="primary" @click="setCardFee">设置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <CardFeeFrom ref="cardFeeForm" @refreshDataList="refreshCardFee"></CardFeeFrom>
        </div>

      </el-tab-pane>
    </el-tabs>
    <EditForm
      ref="editForm"
      @refreshDataList="getDeductRule"
    ></EditForm>
  </div>
</template>
<script>
  import { getDeductRule, getCardFeeList } from '@/api/sys/setting/setting.js'
  import EditForm from './editForm'
  import AxleEditFrom from './axleEditFrom'
  import CardFeeFrom from './cardFeeForm'
  import CreditScoreForm from './creditScoreForm'
  export default {
    components: {
      EditForm,
      AxleEditFrom,
      CardFeeFrom,
      CreditScoreForm
    },
    data () {
      return {
        tabPosition: 'left',
        activeName: 'first',
        viewVisible: false,
        loading: false,
        dataListSelections: [],
        axleTableData: [{
          axle: '11'
        }],
        loginFormSetting: {
          multiAccountLogin: '0',
          singleLoginType: '1'
        },
        orderBy: {
          name: 'number',
          method: 'asc'
        },
        themeFormSetting: {
          defaultTheme: '#1890FF',
          productName: '',
          logo: '',
          defaultLayout: '',
          homeUrl: ''
        },
        cardFeeSetting: {
          firstVal: 0,
          secondVal: 0,
          thirdVal: 0
        },
        emailFormSetting: {
          smtp: '',
          port: '',
          mailName: '',
          mailPassword: ''
        },
        layouts: [
          {label: '横向菜单', value: 'top'},
          {label: '左侧菜单', value: 'left'}
        ],
        checked: true,
        tableData: [],
        truckCreditDeduct: '',
        cardFeeData: []
      }
    },
    methods: {
      handleClick (e) {
        if (e.index === '0') {
        } else if (e.index === '1') {
          this.truckCreditDeduct = this.$varUtils.getVarLabel('globalVar', '200009', '')
          console.log(this.truckCreditDeduct)
          this.getDeductRule()
        } else {
          this.getCardFeeList()
        }
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: '/truck/truckType/allList',
          method: 'get'
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.axleTableData = data.result
            this.loading = false
          }
        })
      },
      refreshCreditRule () {
        this.truckCreditDeduct = this.$varUtils.getVarLabel('globalVar', '200009', '')
        this.getDeductRule()
      },
      refreshCardFee () {
        this.getCardFeeList()
      },
      add () {
        this.$refs.axleFrom.init('add')
      },
      getDeductRule () {
        getDeductRule({
          orderBy: "create_date",
          orderByAORC: "desc"
        }).then(({data}) => {
          if (data.code === '200') {
            this.tableData = data.result.list
          }
        })
      },
      getCardFeeList () {
        getCardFeeList().then(({data}) => {
          if (data.code === '200') {
            this.cardFeeData = data.result
          }
        })
      },
      editAxles (row) {
        let ids = row || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$refs.axleEditFrom.init('edits', ids)
      },
      editAxle (row) {
        this.$refs.axleEditFrom.init('edit', row)
      },
      editState(event, row) {
        this.$confirm('您是否要' + this.$dictUtils.getDictLabel("state", event, "") + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/truckType/updateStatus',
            method: 'post',
            params: {
              'id': row.id,
              'state': event,
              'effectTimeStamp': row.effectTimeStamp
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, '', '')
            }
            this.loading = false
          })
        })

      },
      setCardFee (row) {
        this.$refs.cardFeeForm.init('edit', row)
      },
      editCreditScoce () {
        this.$refs.creditScoreForm.init('edit', this.truckCreditDeduct)
      },
      editCreditRule (row) {
        this.$refs.editForm.init('edit', row)
      },
      doSubmit (form) {
        this.$http.post('/sys/sysConfig/save', form).then(({data}) => {
          if (data.success) {
            this.$message.success(data.msg)
            localStorage.setItem('defaultLayout', data.config.defaultLayout)
            localStorage.setItem('defaultTheme', data.config.defaultTheme)
            this.$events.$emit('updateTheme', data.config.defaultTheme)
            this.$store.commit('config/updateConfig', data.config)
          }
        })
      }
    },
    mounted () {
      this.refreshList()
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.el-input {
    width: inherit;
    height: 32px;
    margin-right: 10px;

    input {
      height: 32px;
      border: 1px solid #AAAAAA;
      border-radius: 4px;
      color: #333333;
    }

    input:hover, input:focus {
      border-color: #1890ff;
    }

    .el-input__inner::-webkit-input-placeholder {
      color: #999999;
    }
  }
  .credit-wrapper{
    .credit-note{
      margin: 20px;
      padding: 13px 20px;
      display: flex;
      background: #F7F7F7;
      p{
        margin: 0;
      }
      .credit-note-left{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1890FF;
        margin-top: 7px;
      }
      .credit-note-right{
        margin-left: 5px;

        ul{
          list-style: none;
          padding-left: 0;
          margin: 0;
          li{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #1890FF;
            line-height: 32px;

          }
        }
      }
    }
    .credit-content{
      margin-left:16px;
      ::v-deep.el-form-item__label{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
      }
      ::v-deep.el-form-item__content{
        line-height: 32px;
      }
      ::v-deep.el-table--border::after, ::v-deep.el-table--group::after, ::v-deep.el-table::before{
        background-color: #ffffff;
      }
      ::v-deep.el-table{
        border:1px solid #dddddd;
        width: 782px !important;

        td, th.is-leaf{
          border-bottom:1px solid #dddddd;
          border-color: #dddddd;
        }
        td, th{
          padding: 0;
          line-height: 36px;
          height: 36px;
        }

        .el-table__header-wrapper{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;

          th{
            background-color: transparent !important;
          }
          .has-gutter th.el-table_1_column_3{
            border-right: none;
          }
        }
        td{
          .cell{
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }
          .el-button{
            font-size: 16px !important;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #1890FF;
            min-width: inherit;
          }
        }
        td:first-child .cell,th:first-child .cell{
          padding: 0 20px;
          text-align: left;
        }

      }
      ::v-deep.el-checkbox {
        .el-checkbox__inner {
          width: 16px;
          height: 16px;
        }

        .el-checkbox__inner:after {
          left: 5.5px;
          height: 8px;
        }

        .el-checkbox__label {
          padding-left: 12px;
          font-size: 16px;
        }
      }
      ::v-deep.el-input input{
        width: 110px;
      }
    }
  }
  .setting-wrapper{
    margin: -20px;
    background-color: #f1f2f5;
    height: calc(100vh - 124px);
    position: relative;

    .settingLeftTitle{
      position: absolute;
      top: 20px;
      left: 20px;
      width: 200px;
      z-index: 1;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;

      p{
        margin: 0;
      }
    }
    .el-tabs,.el-tabs__header{
      height: 100%;
    }
    ::v-deep.el-tabs__header{
      background: #ffffff;
      padding-top: 49px;
      width: 220px;

      .el-tabs__active-bar{
        display: none;
      }
      .el-tabs__item{
        text-align: left;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      .el-tabs__item:hover{
        background: rgba(24, 144, 255, 0.2);
        /*color: #1890FF;*/
      }
      .el-tabs__item.is-active{
        background: rgba(24, 144, 255, 0.2);
        color: #1890FF;
      }
      .el-tabs__nav-wrap::after{
        background-color: transparent;
      }
    }
    ::v-deep.el-tabs__content{
      background: #ffffff;
    }

    ::v-deep.el-tabs__content{
      height: 100%;
      overflow-y: scroll;

      .handling-car{
        padding: 20px;
        .el-table{
          th:nth-child(2){
            .cell{
              padding: 0;
            }
          }
        }
      }
      .card-wrapper{
        display: flex;
        padding-left: 20px;

        p{
          margin-top: 30px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        .card-form{
          margin-top: 20px;
          .el-table__header-wrapper{
            display: none;
          }
        }
        .el-form-item__label{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        .el-input input{
          width: 150px;
        }
      }
    }
  }
</style>
